<template>
    <ITree ref="itree" :treeData="treeData" @deleteFun="deleteFun" @selectNodeFun="selectNodeFun"  @clickNodeFun="clickNodeFun"></ITree>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { ITree } from '@/entry.esm'
import { TreeInterFace } from '@/ITree/src/TreeInterFace'
export default defineComponent({
  name: 'app',
  setup () {
    const itree = ref()
    const treeData = reactive<TreeInterFace<any>>({
      loading: false, // 属性加载状态
      data: [], // 数据源
      operation: [
        {
          label: '删除', // 按钮名字
          isShow: true, // 按钮权限控制
          buttonFun: 'deleteFun', // 按钮回调方法
          remindData: { // 是否需要弹窗
            isShow: true,
            remindTitle: '是否删除',
            remindContext: '删除后数据将无法恢复'
          }
        }
      ], // 右侧功能集合
      options: {
        checkable: true, // 是否展示复选框
        checkStrictly: true, // 是否父子关联
        checkedKeys: ['4841740817268745', '4720821918613558'], // 默认选中集合
        defaultExpandAll: true, // 是否默认展开
        replaceFields: { children: 'children', title: 'deptName', key: 'id' } // 配置展示字段
      }
    })
    setTimeout(() => {
      treeData.data = [{ id: '0', parentId: '-1', deptName: '测试机构', deptType: '-1', status: null, disabled: true, children: [{ id: '4841740817268745', parentId: '0', deptName: '测试校区9999', deptType: '1', status: '0' }, { id: '4720821918613558', parentId: '0', deptName: '123', deptType: '1', status: '0' }, { id: '4578431404433408', parentId: '0', deptName: '记录日志校区', deptType: '1', status: '0' }, { id: '4576778915667970', parentId: '0', deptName: '测试校区222', deptType: '1', status: '0' }, { id: '4392012106817540', parentId: '0', deptName: '测试校区5343', deptType: '1', status: '0', children: [{ id: '4392012106817546', parentId: '4392012106817540', deptName: '测试报名点34634', deptType: '2', status: '0' }] }, { id: '4392012106817536', parentId: '0', deptName: '测试校区888', deptType: '1', status: '0' }, { id: '4387502391140372', parentId: '0', deptName: '测试校区777', deptType: '1', status: '0', children: [{ id: '4387502391140376', parentId: '4387502391140372', deptName: '测试报名点555', deptType: '2', status: '0' }] }, { id: '3729462933176329', parentId: '0', deptName: '华北校区', deptType: '1', status: '0' }, { id: '3729055984992260', parentId: '0', deptName: '东北校区', deptType: '1', status: '1' }, { id: '3602695898152964', parentId: '0', deptName: '昌平校区', deptType: '1', status: '0' }, { id: '407223202566111232', parentId: '0', deptName: '朝阳校区', deptType: '1', status: '0' }, { id: '407223154784600064', parentId: '0', deptName: '大兴校区', deptType: '1', status: '0' }, { id: '407223004406218752', parentId: '0', deptName: '渠道部', deptType: '1', status: '0', children: [{ id: '3371428014432292', parentId: '407223004406218752', deptName: '渠道名称', deptType: '2', status: '0' }] }, { id: '407222953739026432', parentId: '0', deptName: '线上咨询部', deptType: '1', status: '0', children: [{ id: '4576778915667975', parentId: '407222953739026432', deptName: '日志报名点', deptType: '2', status: '0' }, { id: '2764846560763915', parentId: '407222953739026432', deptName: '咨询一组2', deptType: '2', status: '0', children: [{ id: '2764846560763920', parentId: '2764846560763915', deptName: '测试工会3', deptType: '3', status: '0' }, { id: '2764846560763917', parentId: '2764846560763915', deptName: '测试咨询一组分组2', deptType: '3', status: '0' }] }] }] }]
    }, 1000)
    const clickNodeFun = (nodeId:string[], data:any) => {
      console.log(nodeId, data)
    }
    const selectNodeFun = (nodeId:string[], data:any) => {
      console.log(nodeId, data)
    }
    const deleteFun = (val:any) => {
      alert(JSON.stringify(val))
    }
    const getTreeCheckBoxAll = () => {
      console.log(itree.value.checkTreeValue())
      alert(itree.value.checkTreeValue())
    }
    return {
      getTreeCheckBoxAll,
      deleteFun,
      clickNodeFun,
      selectNodeFun,
      treeData,
      itree
    }
  },
  components: {
    ITree
  }
})
</script>
